<template>
	<view class="container">
		<view class="form-container">
			<view class="form-item">
				<text class="label">当前手机号</text>
				<input class="input" type="number" v-model="userInfo.phone" disabled />
			</view>
			
			<view class="form-item">
				<text class="label">新密码</text>
				<input class="input" type="password" v-model="passwordData.newPassword" placeholder="请输入新密码" />
			</view>
			
			<view class="form-item">
				<text class="label">确认新密码</text>
				<input class="input" type="password" v-model="passwordData.confirmPassword" placeholder="请再次输入新密码" />
			</view>
			
			<button class="save-btn" @click="changePassword">修改密码</button>
		</view>
		
		<view class="form-container" style="margin-top: 20rpx;">
			<button class="delete-btn" @click="showDeleteConfirm">注销账户</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					phone: ''
				},
				passwordData: {
					newPassword: '',
					confirmPassword: ''
				}
			}
		},
		onLoad() {
			// 从本地存储获取用户信息
			const userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.userInfo = {
					phone: userInfo.phone || ''
				};
			}
		},
		methods: {
			changePassword() {
				if (!this.passwordData.newPassword) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					});
					return;
				}
				
				if (this.passwordData.newPassword !== this.passwordData.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					return;
				}
				
				// 这里应该是调用后端接口修改密码
				// 模拟修改成功
				uni.showToast({
					title: '密码修改成功',
					icon: 'success'
				});
				
				// 清空输入框
				this.passwordData.newPassword = '';
				this.passwordData.confirmPassword = '';
			},
			
			showDeleteConfirm() {
				uni.showModal({
					title: '确认注销',
					content: '确定要注销此账户吗？此操作不可恢复。',
					success: (res) => {
						if (res.confirm) {
							this.deleteAccount();
						}
					}
				});
			},
			
			deleteAccount() {
				// 这里应该是调用后端接口注销账户
				// 模拟注销成功
				uni.showToast({
					title: '账户注销成功',
					icon: 'success'
				});
				
				// 清除本地存储的用户信息
				uni.removeStorageSync('userInfo');
				
				// 延迟跳转到登录页面
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}, 1000);
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}
	
	.form-container {
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx;
	}
	
	.form-item {
		margin-bottom: 30rpx;
	}
	
	.form-item:last-child {
		margin-bottom: 0;
	}
	
	.label {
		display: block;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 15rpx;
	}
	
	.input {
		width: 100%;
		height: 80rpx;
		background-color: #f8f8f8;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}
	
	.input:disabled {
		background-color: #eeeeee;
		color: #999999;
	}
	
	.save-btn {
		margin-top: 50rpx;
		width: 100%;
		height: 80rpx;
		background-color: #007AFF;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 10rpx;
	}
	
	.delete-btn {
		width: 100%;
		height: 80rpx;
		background-color: #ff3b30;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 10rpx;
	}
</style>